

require(['./config'], () => {

    require(['template', 'header', 'footer'], (template) => {
        class Shop{
            constructor(){
                this.init()
                this.checksChange()
                this.del()
            }
            init(){
                //从    window.localStorage.getItem('cart')
               const cartlist =window.localStorage.getItem('cart')
                //判断购物车是否存在
                if(cartlist){
                    //存在
                    //如果存在，就 把cartlist 给 this。cartlist
                    this.cartlist=JSON.parse(cartlist)
                  
                    this.renderCart()
                    this.operation()
                }else{
                    //不存在
                    $('#shopNav').hide()
                    $('#shopNull').show()
                  
                }

            }

            
            //渲染页面
            renderCart(){
                 $('#shop_tbody').html(template('srcShop', { cartlist: this.cartlist }))
    //  console.log($('#vals').val())
                 this.calcMoney()
                //  console.log(this.cartlist)
            }

checksChange(){
    //单选框修改事件
    //保留外层this
    const _this=this
    $('.check').on('change',function(){
        const id=$(this).parents('tr').attr('data-id')-0
        // console.log(id)
        //获取商品的自定义id，判断是否与shop。id一样，一样就默认选中
        _this.cartlist=_this.cartlist.map(shop=>{
            //根据从数据里面找的的当前商品的，吧商品的check属性赋值为当前边框的状态
            if(shop.id===id){
                // console.log()
                shop.check =$(this).prop('checked')  //可以改变checked的布尔值

            }
         
            return shop
        })
        
        //更新Window。localstorage
window.localStorage.setItem('cart',JSON.stringify(_this.cartlist))
_this.calcMoney()
    })

    //全选
    $('#quanxuan').on('change',function(){
    //遍历对象

      $.each(_this.cartlist, (i, val)=> {

        val.check=$(this).prop('checked')
       





});

        //更新Window。localstorage
window.localStorage.setItem('cart',JSON.stringify(_this.cartlist))
_this.calcMoney()
_this.renderCart()

    })
}
//计算钱
calcMoney(){
    //这是一个计算的对象，无论各种花里胡哨，只要调用就对了
    const money=this.cartlist.reduce((total,shop)=>{
      if(shop.check){
        total += shop.serialNumber*shop.count
      }
      return total
    },0)
    $('.paymoneys').html(money)
    $('#paymoneys').html(money)
}

//加减
operation(){
   const _this=this


$('.jia').on('click',function(){
    let id=$(this).parent('td').parent('tr').attr('data-id')

    //当点击加号的时候改变window。localst。。。里面的count属性
    _this.cartlist=_this.cartlist.map(shop=>{
        if(shop.id==id){
           
            $(this).prev().val(Number($(this).prev().val())+1)
            // console.log()
            // $(".val").val(Number($(".val").val()) + 1)
            // $(this).prop()
            shop.count++
        }
        // if(shop.count<1){
        //     //执行删除
        // }
       
     
        return shop
    })
    
    //更新Window。localstorage

   
    window.localStorage.setItem('cart',JSON.stringify(_this.cartlist))
    _this.calcMoney()
   
})

$('.jian').on('click',function(){
    let id=$(this).parents('tr').attr('data-id')
  
    //当点击加号的时候改变window。localst。。。里面的count属性
    _this.cartlist=_this.cartlist.map(shop=>{
        if( shop.count>1){
            //清楚
            _this.del()
        
        if(shop.id==id){
          
            $(this).next().val(Number($(this).next().val())-1)
            // console.log()
            // $(".val").val(Number($(".val").val()) + 1)
            // $(this).prop()
      
            shop.count--
         
        }
    }
        // if(shop.count<1){
        //     //执行删除
        // }
        // 
     
        return shop
    })
    
    //更新Window。localstorage

   
    window.localStorage.setItem('cart',JSON.stringify(_this.cartlist))
    _this.calcMoney()
   
})


//input失去焦点
$('.val').on('blur',function(){
    
    //找到父亲多得data-id  map  更新
    let id=$(this).parents('tr').attr('data-id')
  
    //当点击加号的时候改变window。localst。。。里面的count属性
    _this.cartlist=_this.cartlist.map(shop=>{
        if(shop.id==id){
            shop.count=$(this).val()
        }
return shop
   

    })

 //更新Window。localstorage

   
    window.localStorage.setItem('cart',JSON.stringify(_this.cartlist))
    _this.calcMoney()

})



}

//删除del
del(){
    const _this=this
//点击事件。找到this父亲tr，删除 remove 掉   还要通过id找到shop。id删除window.localStorage  渲染
$('.del').on('click',function(){
   
    $(this).parents('tr').remove()
    let id=$(this).parents('tr').attr('data-id')
//     _this.cartlist=_this.cartlist.filter((item,index,arr)=>{
//  console.log(1)
//      if(shop.id==id){

_this.cartlist=JSON.parse(window.localStorage.getItem('cart')).filter(item=>!id.includes(item.id))


window.localStorage.setItem('cart',JSON.stringify(_this.cartlist))
_this.calcMoney()
//      }
// return index
//     })

// console.log($(_this.cartlist).filter())

})

 }



        }
        new Shop()
    })
})
